<template>
  <transition name="fade">
    <div style="padding-top: 98px;background-color: #fff;padding-bottom: 6px;">
      <div class="swiper_wrap">
        <div class="img_wrap">
          <slider v-if="item_detial.maxImg" @scroll_index="set_active"
                  :btn="true"
                  :active_index="active_index"
          >
            <div v-for="(item, index) in item_detial.maxImg" class="swiper-slide">
              <img v-if="index===0" :src="item" alt="">
              <img v-else v-lazy="item" alt="">
            </div>
          </slider>
        </div>
      </div>
      <div class="img_nav_wrap">
        <div v-for="(item, index) in item_detial.minImg">
          <div :class="index==active_index ? 'active':''">
            <img :src="item" @click="set_index" :data-id="index" alt="">
          </div>
        </div>
      </div>
      <div class="text_wrap">
        <h1>{{item_detial.names}}</h1>
        <p>¥{{item_detial.price}} 元</p>
        <span>优惠</span>
        <h2>首单满1000减100元</h2>
        <div>
          <b @click="downLoad"></b>
          <p>去铭材APP购买</p>
        </div>
      </div>
      <div class="about_info">
        <span>相关信息</span>
        <div>
          <h1></h1>
          <p></p>
        </div>
        <img src="../assets/img/aboutInfo.jpg" alt="">
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import {get_items_detial} from 'api/detial'
  import slider from '@/base_/slider'
  import { w_scroll_top } from 'assets/dom/dom'

  export default {
    name: 'detial',
    data() {
      return {
        item_detial: {},
        active_index: 0
      }
    },
    props: [],
    created() {
        this.get_items_detial()
    },
    mounted() {
      w_scroll_top(0)
    },
    computed: {},
    methods: {
      get_items_detial() {
        get_items_detial({id: this.$route.query.itemId}).then((res) => {
          if (res.status === 200) {
            const _res = res.data
            if (_res.resStatus === 0) {
              this.item_detial = _res.data
              console.log(this.item_detial)
            }
          }
        })
      },
      set_index(e) {
        this.active_index = e.target.getAttribute("data-id")
      },
      set_active(id) {
        this.active_index = id
      },
      downLoad(){
        location.href='http://a.app.qq.com/o/simple.jsp?pkgname=com.mingpinjiancai.market'
      }
    },
    components: {
      slider
    }
  }
</script>

<style scoped lang="scss">
  .swiper_wrap {
    width: 100%;
    padding-top: 56%;
    position: relative;
    background-color: #fff;
  }
  .img_wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }
  .img_nav_wrap {
    margin-top: 14px;
    position: relative;
    z-index: 4;
    padding-right: 60px;
    text-align: center;
    background-color: #fff;
    > div {
      margin: 1px;
      display: inline-block;
      .active {
        border: 1px solid #F14;
      }
      > div {
        display: table-cell;
        vertical-align: middle;
        width: 45px;
        height: 45px;
        background-color: #fff;
        border: 1px solid #ddd;
        overflow: hidden;
        > img {
          width: 100%;
          max-height: 100%;
        }
      }
    }

  }
  .text_wrap{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 30px;
    text-align: left;
    >h1{
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 1px;
      line-height: 18px;
    }
    >p{
      margin-top: 20px;
      background-color: #f0f9fe;
      color: #0d96da;
      height: 51px;
      line-height: 51px;
      font-size: 20px;
      padding-left: 15px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    >span{
      color: #bbb;
      display: block;
    }
    >h2{
      margin-top: 11px;
      font-size: 12px;
      color: #009ada;
      border: 1px solid #009ada;
      border-radius: 3px;
      padding: 3px 10px;
      display: inline-block;
      letter-spacing: 1px;
    }
    >div{
      margin-top: 15px;
      overflow: hidden;
      >b{
        float: right;
        width: 60px;
        height: 25px;
        background-image: url('../assets/img/downLoad.jpg');
        background-size: 100% 100%;
      }
      >p{
        float: right;
        margin-top: 5px;
        margin-right: 10px;
        font-size: 15px;
        color: #000;
        letter-spacing: 1px;
        font-weight: 700;
      }
    }
  }
  .about_info{
    text-align: left;
    margin-top: 35px;
    >span{
     margin-left: 25px;
      color: #80d2f0;
    }
    >div{
      position: relative;
      height: 3px;
      margin-top: 12px;
      >h1{
       position: absolute;
        width: 100%;
        height: 100%;
        background-color: #eee;
      }
      >p{
      position: absolute;
      width: 16%;
      height: 100%;
      background-color: #81b8cd;
      }
    }
    >img{
      width: 96%;
      margin-left: 2%;
      margin-top: 13px;
    }
  }
  .fade-enter-active /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }

  .fade-enter-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 1;
    transition: all 0.35s;
  }
</style>
